import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const SafetyGaugeMeta: IPublicTypeComponentMetadata = {
  componentName: 'SafetyGauge',
  title: '空间安全百分比表',
  category: '图表组件',
  group: '首页',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'SafetyGauge',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'items',
      propType: 'arrayOf',
      description: '仪表盘数据列表'
    },
    {
      name: 'width',
      propType: 'number',
      description: '组件宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '组件高度'
    },
    {
      name: 'itemWidth',
      propType: 'number',
      description: '单个仪表盘宽度'
    },
    {
      name: 'itemHeight',
      propType: 'number',
      description: '单个仪表盘高度'
    },
    {
      name: 'gap',
      propType: 'number',
      description: '项目间距'
    },
    {
      name: 'percentageFontSize',
      propType: 'number',
      description: '百分比文字大小'
    },
    {
      name: 'labelFontSize',
      propType: 'number',
      description: '标签文字大小'
    },
    {
      name: 'percentageColor',
      propType: 'string',
      description: '百分比文字颜色'
    },
    {
      name: 'labelColor',
      propType: 'string',
      description: '标签文字颜色'
    },
    {
      name: 'gaugeColor',
      propType: 'string',
      description: '仪表盘颜色主题'
    },
    {
      name: 'pointerColor',
      propType: 'string',
      description: '指针颜色'
    },
    {
      name: 'onClick',
      propType: 'func',
      description: '点击事件'
    }
  ],
  configure: {
    props: [
      // 数据配置
      {
        name: 'items',
        title: {
          label: '仪表盘数据',
          tip: '仪表盘数据列表'
        },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'percentage',
                      title: '百分比',
                      setter: 'NumberSetter'
                    },
                    {
                      name: 'label',
                      title: '标签',
                      setter: 'StringSetter'
                    }
                  ]
                }
              }
            }
          }
        },
        initialValue: [
          { percentage: 85, label: '候车厅' },
          { percentage: 92, label: '到达层' },
          { percentage: 78, label: '出租车' },
          { percentage: 88, label: '地铁' },
          { percentage: 75, label: '长运' },
          { percentage: 90, label: '网约车' }
        ]
      },
      // 基础配置
      {
        name: 'basic',
        type: 'group',
        display: 'accordion',
        title: {
          label: '基础配置',
        },
        items: [
          {
            name: 'width',
            title: {
              label: '宽度',
              tip: '组件宽度(px)'
            },
            setter: 'NumberSetter',
            initialValue: 600
          },
          {
            name: 'height',
            title: {
              label: '高度',
              tip: '组件高度(px)'
            },
            setter: 'NumberSetter',
            initialValue: 320
          },
          {
            name: 'itemWidth',
            title: {
              label: '单个宽度',
              tip: '单个仪表盘宽度(px)'
            },
            setter: 'NumberSetter',
            initialValue: 200
          },
          {
            name: 'itemHeight',
            title: {
              label: '单个高度',
              tip: '单个仪表盘高度(px)'
            },
            setter: 'NumberSetter',
            initialValue: 150
          },
          {
            name: 'gap',
            title: {
              label: '间距',
              tip: '项目间距(px)'
            },
            setter: 'NumberSetter',
            initialValue: 20
          }
        ]
      },
      // 字体配置
      {
        name: 'font',
        type: 'group',
        display: 'accordion',
        title: {
          label: '字体配置',
        },
        items: [
          {
            name: 'percentageFontSize',
            title: {
              label: '百分比字体大小',
              tip: '百分比数字的字体大小'
            },
            setter: 'NumberSetter',
            initialValue: 14
          },
          {
            name: 'labelFontSize',
            title: {
              label: '标签字体大小',
              tip: '标签文字的字体大小'
            },
            setter: 'NumberSetter',
            initialValue: 14
          }
        ]
      },
      // 颜色配置
      {
        name: 'colors',
        type: 'group',
        display: 'accordion',
        title: {
          label: '颜色配置',
        },
        items: [
          {
            name: 'percentageColor',
            title: {
              label: '百分比颜色',
              tip: '百分比文字颜色'
            },
            setter: 'ColorSetter',
            initialValue: '#00D4FF'
          },
          {
            name: 'labelColor',
            title: {
              label: '标签颜色',
              tip: '标签文字颜色'
            },
            setter: 'ColorSetter',
            initialValue: '#FFFFFF'
          },
          {
            name: 'gaugeColor',
            title: {
              label: '仪表盘颜色',
              tip: '仪表盘进度条颜色'
            },
            setter: 'ColorSetter',
            initialValue: '#00D4FF'
          },
          {
            name: 'pointerColor',
            title: {
              label: '指针颜色',
              tip: '指针颜色'
            },
            setter: 'ColorSetter',
            initialValue: '#FF6B6B'
          }
        ]
      },
      // 样式属性
      {
        name: 'style',
        type: 'group',
        display: 'accordion',
        title: {
          label: '样式属性',
        },
        items: [
          {
            name: 'style',
            title: {
              label: '自定义样式',
            },
            setter: 'StyleSetter',
          },
          {
            name: 'className',
            title: {
              label: '自定义类名',
            },
            setter: 'StringSetter',
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onClick']
    },
    component: {}
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '安全仪表盘组',
    screenshot: '',
    schema: {
      componentName: 'SafetyGauge',
      props: {
        items: [
          { percentage: 85, label: '候车厅' },
          { percentage: 92, label: '到达层' },
          { percentage: 78, label: '出租车' },
          { percentage: 88, label: '地铁' },
          { percentage: 75, label: '长运' },
          { percentage: 90, label: '网约车' }
        ],
        width: 500,
        height: 320,
        gap: 20,
        percentageFontSize: 14,
        labelFontSize: 14,
        percentageColor: '#00D4FF',
        labelColor: '#FFFFFF',
        gaugeColor: '#00D4FF',
        pointerColor: '#FF6B6B'
      }
    }
  }
];

export default {
  ...SafetyGaugeMeta,
  snippets,
};
